<template>
	<view class="zh-share">
		<u-mask :show="props.show" @click="close"></u-mask>
		<view class="box" :class="{'active':props.show}">
			<view class="header display-flex justify-between">
				<view class='text-center flex'>
					<text class="font-32 font-bold">分享</text>
				</view>
				<image src="@/static/icons/close_icon.png" class="close-icon" @click="close"/>
			</view>
			<view class="content display-flex aling-center justify-around">
				<view class="item">
					<view class="item-box">
						<image :src="IMG_URL + '/share/wechat_icon.png'" class="wechat-icon"/>
						<text>微信</text>
					</view>
					<button open-type="share" @click="handleShare('wechat')"></button>
				</view>
				<view class="item">
					<view class="item-box">
						<image :src="IMG_URL + '/share/friends_icon.png'" class="friends-icon"/>
						<text>朋友圈</text>
					</view>
					<button open-type="share" @click="handleShare('friends')"></button>
				</view>
			<!-- 	<view class="item">
					<view class="item-box">
						<image :src="IMG_URL + '/share/qq_icon.png'" class="qq-icon"/>
						<text>QQ</text>
					</view>
					<button open-type="share" @click="handleShare('qq')"></button>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { tip } from '@/utils'
	import { IMG_URL } from '@/utils/constant'
	const props = defineProps<{
		show: boolean
		articleData:{
			title:string
			summary:string
			imageUrl:string
			href:string
		}
	}>()
	
	const emit = defineEmits(['close'])
	
	const close = () => {
		emit('close')
	}
	
	const handleShare = (name:string) => {
		// uni.getProvider({
		// 	service:'share',
		// 	success:(res:any) => {
		// 		console.log(res)
		// 	}
		// })
		uni.getImageInfo({
			src:props.articleData.imageUrl,
			success:(res:any) => {
				const resPath = res.path
				uni.getFileInfo({
					filePath: resPath,
					success: (res1:any) => {
						if(res1.size < 20 * 1024) {
							share(name, props.articleData.imageUrl)
						} else if (res1.size > 20 * 1024 && res1.size < 40 * 1024) {
							uni.compressImage({
								src:resPath,
								quality:50,
								success:(res2) => {
									share(name, res2.tempFilePath)
								}
							})
						} else if(res1.size >= 40 * 1024){
							uni.compressImage({
								src:resPath,
								quality:10,
								success:(res2) => {
									share(name, res2.tempFilePath)
								}
							})
						}
					},
					fail: (err:any)  =>{
						
					}
				})	
			},
			fail:() => {
				
			}
		})
	}
	const share = (name:string, imgUrl:string) => {
		const domain = import.meta.env.VITE_APP_DOMAIN
		if(name == 'wechat') {
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 5,
				title: props.articleData.title,
				imageUrl:imgUrl,
				miniProgram:{
					id:'gh_ba274cace17e',
					path:props.articleData.href,
					type:0,
					webUrl:domain + props.articleData.href
				},
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
					tip.showToast('分享成功')
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			})
		} else if(name == 'friends'){
			uni.share({
				provider: "weixin",
				scene: "WXSceneTimeline",
				type: 5,
				miniProgram:{
					id:'gh_ba274cace17e',
					path:props.articleData.href,
					type:0,
					webUrl:domain + props.articleData.href
				},
				title: props.articleData.title,
				imageUrl:imgUrl,
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
					tip.showToast('分享成功')
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			})	
		} else if(name == 'qq'){
			console.log(props.articleData)
			uni.share({
				provider: "qq",
				type: 1,
				href: props.articleData.href,
				title: props.articleData.title,
				summary: props.articleData.summary,
				imageUrl:imgUrl,
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
					tip.showToast('分享成功')
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			})	
		}
	}
</script>

<style lang="scss" scoped>
.zh-share {
	.box {
		position: fixed;
		bottom:0;
		left:0;
		right:0;
		z-index:2;
		max-height:0;
		background-color: $uni-bg-card-color;
		border-radius: 25px 25px 0px 0px;
		padding:0 30rpx;
		z-index:1000;
		&.active {
			max-height: 1000rpx;
			transition: all .6s ease-out;
		}
		.header {
			padding-top: 27rpx;
			.close-icon {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.content {
			margin:60rpx 30rpx 90rpx; 
			.item {
				text-align: center;
				position: relative;
				button {
					width:100rpx;
					height:120rpx;
					position: relative;
					opacity: 0;
				}
				.item-box {
					position:absolute;
					.wechat-icon,.friends-icon,.qq-icon {
						width:73rpx;
						height: 73rpx;
					}
					text {
						display:block;
						font-size:24rpx;
					}
				}
				
			}
		}
	}
	
}
</style>
